<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title></title>
	<link rel="stylesheet" href="">
	<style>
		.active{
			background-color: pink;
		}
		ul li{
			list-style: none;
			float: left;
			width: 100px;
			height: 30px;
			text-align: center;
			line-height: 30px;
			margin-left: 5px;
			border: 1px solid black;
		}
	</style>
</head>
<body>
<script src='http://cdn.jsdelivr.net/vue/1.0.26/vue.js'></script>
<script src='https://cdn.jsdelivr.net/vue.router/0.7.10/vue-router.min.js'></script>
<div id="root">
<div>
	<ul class="pagination">
		 <li v-for="n in pageCount" @click='doclick(n)'>
		  	<a href="javascripit:void(0)" v-bind:class="activeNumber === n + 1 ? 'active' : ''">{{ n + 1 }}</a>
		 </li>
	 </ul>
</div>	 
<div v-for='(index,item) in persons' v-if='activeNumber===item.id'>他的名字是：{{item.name}},年龄为:{{item.age}},性别为:{{item.sex}}</div>
	
</div>	
<script>
	var vm = new Vue({
		el : '#root',
		data : function(){
			return {
				msg : '你好啊',
				pageCount : 5,
				activeNumber : 1,
				persons : [
					{name:'Ken',age:'18',sex:'male',id:1},
					{name:'Susan',age:'20',sex:'female',id:2},
					{name:'Jhon',age:'15',sex:'male',id:3},
					{name:'King',age:'20',sex:'male',id:4},
					{name:'Lj',age:'10',sex:'male',id:5}
				]
			}
		},
		methods : {
			doclick : function(n){
				this.activeNumber = (n+1);
			}
		}
	});
	/**
	 * 在jquery中标是这样 var index = 0;
	 * 先获取元素$()
	 * $().each(function(){
	 * 		$(this).
	 * })
	 */
	/**
	 * 5, v-bind  这个指令用于响应地更新 HTML 特性，
	 * 比如绑定某个class元素或元素的style样式。
	 * eg,分页功能中当前页数高亮的效果，可以使用bind指令。
	 */
</script>
</body>
</html>